<script setup lang="ts">
import Upload from "~/components/common/Upload.vue";
import MDPreview from "~/components/editor/MDPreview.vue";
import type {ComfyUIProperties, Param, UserWorkFlow, WorkFlow} from "~/utils/comfyuiApi";


import api_text2img from '~/data/comfyuiapi/workflow_api_text2img.json'
import api_img2img from '~/data/comfyuiapi/workflow_api_img2img.json'
import api_faceswap from '~/data/comfyuiapi/workflow_api_faceswap.json'
import api_img2tagger from '~/data/comfyuiapi/workflow_api_img2tagger.json'
import api_segment from '~/data/comfyuiapi/workflow_api_segment.json'
import api_model from '~/data/comfyuiapi/workflow_api_model.json'
import api_img2video from '~/data/comfyuiapi/workflow_api_img2video.json'
import api_interiorDesign from '~/data/comfyuiapi/workflow_api_interiorDesign.json'
import api_removebg from '~/data/comfyuiapi/workflow_api removebg.json'
import api_upscalex4 from '~/data/comfyuiapi/workflow_api_upscalex4.json'
import workflowParams from '~/data/comfyuiapi/workflowParams.json'
import ImagePreviewFull from "~/components/ai/ImagePreviewFull.vue";

import {VNumberInput} from 'vuetify/labs/VNumberInput'
import WorkFlowCard from "~/components/card/WorkFlowCard.vue";
import {NodeToParam} from "~/data/comfyuiapi/NodeToParam";
import { defineAsyncComponent } from 'vue'
const CodeEditDialog = defineAsyncComponent(() =>
    import('~/components/editor/CodeEditDialog.vue')
)
// 工作流数据接口
// 默认布局
definePageMeta({
  //布局
  layout: 'landing-layout',
  validate: async (route: any) => {
    return true
  }
})
const show = ref(true);

//当前网页的根路径
const rootPath = ref('')


//上传的工作流
const uploadWorkFlow = ref('')
watch(uploadWorkFlow, (newVal) => {
  console.log(newVal)
})
// const data = ref<WorkFlow[]>([])
const {workflows: data, useLocalComfyUI} = storeToRefs(useStableDiffusionStore())
/**
 * 获取默认工作流数据
 */
const handleGetDefautData = () => {
  const preview = 'https://wangbo0808.oss-cn-shanghai.aliyuncs.com/aidraw/00004-2024-04-11_Restart.png'
  const flows = [
    {
      name: "text2img",
      title: "文生图",
      params: workflowParams['text2img'] as Param[],
      workflow: JSON.stringify(api_text2img, null, 2),
      preview
    },
    {
      name: "text2img_tweet",
      title: "文生图-推文专用",
      params: workflowParams['text2img'] as Param[],
      workflow: JSON.stringify(api_text2img, null, 2),
      preview
    },
    {
      name: "img2img",
      title: "图生图",
      params: workflowParams['img2img'] as Param[],
      workflow: JSON.stringify(api_img2img, null, 2),
      preview
    },
    {
      name: "img2tagger",
      title: "反推提示词",
      params: workflowParams['img2tagger'] as Param[],
      workflow: JSON.stringify(api_img2tagger, null, 2),
      preview
    },
    {
      name: "img2tagger_tweet",
      title: "反推提示词-推文专用",
      params: workflowParams['img2tagger'] as Param[],
      workflow: JSON.stringify(api_img2tagger, null, 2),
      preview
    },
    {
      name: "faceSwap",
      title: "换脸",
      params: workflowParams['faceswap'] as Param[],
      workflow: JSON.stringify(api_faceswap, null, 2),
      preview
    },
    {
      name: "faceSwap_tweet",
      title: "换脸_推文专用，角色一致",
      params: workflowParams['faceswap'] as Param[],
      workflow: JSON.stringify(api_faceswap, null, 2),
      preview
    },
    {
      name: "img2img_tweet",
      title: "图生图-推文专用（可自定义角色一致性、高清修复等）",
      params: workflowParams['faceswap'] as Param[],
      workflow: JSON.stringify(api_faceswap, null, 2),
      preview
    },
    {
      name: "aimodel",
      title: "AI模特（电商换装）",
      params: workflowParams['aimodel'] as Param[],
      workflow: JSON.stringify(api_model, null, 2),
      preview
    },
    {
      name: "segment",
      title: "语义抠图",
      params: workflowParams['segment'] as Param[],
      workflow: JSON.stringify(api_segment, null, 2),
    },
    {
      name: "removebg",
      title: "去除背景",
      params: workflowParams['removebg'] as Param[],
      workflow: JSON.stringify(api_removebg, null, 2),
    },
    {
      name: "upscalex4",
      title: "高清放大4倍",
      params: workflowParams['upscalex4'] as Param[],
      workflow: JSON.stringify(api_upscalex4, null, 2),
    },
    {
      name: "img2video",
      title: "图生视频",
      params: workflowParams['img2video'] as Param[],
      workflow: JSON.stringify(api_img2video, null, 2),
    },
    {
      name: "img2video_tweet",
      title: "图生视频-推文专用",
      params: workflowParams['img2video'] as Param[],
      workflow: JSON.stringify(api_img2video, null, 2),
    },
    {
      name: "interiorDesign",
      title: "室内装修设计",
      params: workflowParams['interiorDesign'] as Param[],
      workflow: JSON.stringify(api_interiorDesign, null, 2),
    },
  ] as WorkFlow[]
  const deafultWorkFlow = [] as WorkFlow[]
  flows.forEach((item: WorkFlow) => {
    // Object.assign(item, {typeOptions: ComfyUI.workFlow_getNodes(item.workflow)})
    deafultWorkFlow.push(item)
  })
  return deafultWorkFlow
}
/**
 * 重置为默认工作流
 */
const handleResetWorkFlow = async () => {
  // 重置为默认状态
  const {workflows} = await ComfyUI.workFlow_Save(handleGetDefautData())
  data.value = workflows
  dialog_reset.value = false
}
/**
 * 重置单个工作流为默认工作流
 */
const handleResetWorkFlowItem = async (name: string) => {
  // 重置为默认状态
  const {workflows} = await ComfyUI.workFlow_Save([handleGetDefautData().find(item => item.name === name)] as WorkFlow[])
  console.log("重置单个工作流为默认工作流", workflows)
  data.value.splice(data.value.findIndex(item => item.name === name), 1, workflows.find(item => item.name === name) as WorkFlow)
  // data.value.splice(data.value.findIndex(item => item.name === workflow_name), 1, workflows[0])
  // dialog_reset.value = false
  useSnackbarStore().showSuccessMessage('重置成功')
}


onMounted(async () => {
  await handleInit()
  rootPath.value = window.location.origin
//   初始化，如果是第一次使用，数据库中没有，则保存在数据库
})

/**
 * 初始化,主要针对第一次
 */
const handleInit = async () => {
  //获取工作流
  const {
    workflows
  } = await ComfyUI.workFlow_Get() as UserWorkFlow
  //如果数据库中没有数据，则保存默认数据
  if (!workflows) {
    data.value = handleGetDefautData()
    // 上传到数据库
    await ComfyUI.workFlow_Init(data.value)
  } else {
    data.value = workflows.sort((a: WorkFlow, b: WorkFlow) => {
          return a.sortNumber || 999 - b.sortNumber || 999
        }
    )
  }
}
/**
 * 修改
 */
const handleEditWorkFlow = (index: number) => {
  windowTab.value = 1
  editItem.value = data.value[index]
}
/**
 * 保存单个工作流
 */
// const text2img = workflowParams.text2img as Param[]
// const params = ref<Param[]>([])
// watch(params, (newVal) => {
//   console.log(newVal)
// }, {
//   deep: true
// })
const handleAddParam = (workFlow: WorkFlow, param?: Param) => {
  //如果output节点不存在，则增加output节点
  if (!workFlow.params!.find(item => item.name === 'output')) {
    workFlow.params!.push({
      title: '产出节点(必须）',
      name: 'output',
      type: [],
      param: '',
      outputType: 'image',
      timeout: 60
    })
  }
  workFlow.params!.push({
    title: param?.title || '',
    name: param?.name!,
    type: param?.type || [],
    param: param?.param || '',
  })
}

/**
 * 验证ComfyUI
 * @param workFlow
 */
const handleVerirication = async (workFlow: WorkFlow) => {
  let result
  if (useLocalComfyUI.value) {
    result = await ComfyUI.local_drawCustomWorkFlow(JSON.parse(workFlow.workflow!), workFlow.params!)
  } else {
    //从param中读取参数，当放到参数对象
    const _properties = {} as ComfyUIProperties
    workFlow.params!.forEach(item => {
      if (item.name !== 'output') {
        Object.assign(_properties, {[item.name]: item.param})
      }
    })
    result = await ComfyUI.submitCustomeWorkflow(_properties, {
      workflow_name: workFlow.name!,
    })
    // const result = await ComfyUI.submitCustomeWorkflow()
  }
  //保存到预览图
  if (!result) {
    return
  }
  //将产出参数保存到参数和预览图
  Object.assign(workFlow.params.find(item => item.name === 'output'), {param: result})
  //保存到预览图
  Object.assign(workFlow, {preview: result})
  console.log(result)

}

const table_headers = ['操作', '节点别称', '标准名称', '选择节点', '默认值', '节点传参']
//标准类型
type PropertyKey = keyof ComfyUIProperties

interface SelectOption {
  name: string
  value: PropertyKey | 'custom_number' | 'custom_string'
}

//配置参数
// const keys: PropertyKey[] = ['width', 'height', 'negative', 'positive', 'segmentpart', 'seed', 'ckpt_name', 'output', 'denoise', 'image_path_mask', 'image_path_origin', 'image_path_face','image_path_style']
const keyOptions: SelectOption[] = [
  {
    name: '宽度',
    value: 'width'
  },
  {
    name: '高度',
    value: 'height'
  },
  {
    name: '负向提示词',
    value: 'negative'
  },
  {
    name: '正向提示词',
    value: 'positive'
  },
  {
    name: '抠图部位',
    value: 'segmentpart'
  },
  {
    name: '随机种子',
    value: 'seed'
  },
  {
    name: '模型选择',
    value: 'ckpt_name'
  },
  {
    name: '产出',
    value: 'output'
  },
  {
    name: '重绘幅度',
    value: 'denoise'
  },
  {
    name: '遮罩图',
    value: 'image_path_mask'
  },
  {
    name: '原图(仅一张输入图)',
    value: 'image_path_origin'
  },
  {
    name: '脸图参考',
    value: 'image_path_face'
  },
  {
    name: '风格图参考',
    value: 'image_path_style'
  },
  {
    name: '在线编辑-原图',
    value: 'advance_onlineEdit_origin'
  },
  {
    name: '在线编辑-遮罩',
    value: 'advance_onlineEdit_mask'
  },
  {
    name: '自定义下拉选择',
    value: 'custom_dropselect_1'
  },
  {
    name: '自定义下拉选择2',
    value: 'custom_dropselect_2'
  },
  {
    name: '自定义数字',
    value: 'custom_number_1'
  },
  {
    name: '自定义文本',
    value: 'custom_string_1'
  },
  {
    name: '自定义数字2',
    value: 'custom_number_2'
  },
  {
    name: '自定义文本2',
    value: 'custom_string_2'
  },
  {
    name: '自定义数字3',
    value: 'custom_number_3'
  },
  {
    name: '自定义文本3',
    value: 'custom_string_3'
  },
  {
    name: '自定义数字4',
    value: 'custom_number_4'
  },
  {
    name: '自定义文本4',
    value: 'custom_string_4'
  },
  {
    name: '自定义数字5',
    value: 'custom_number_5'
  },
  {
    name: '自定义文本5',
    value: 'custom_string_5'
  },
  {
    name: '自定义数字6',
    value: 'custom_number_6'
  },
  {
    name: '自定义文本6',
    value: 'custom_string_6'
  }
]


const outputTypes = [
  {
    name: '图片',
    value: 'image'
  },
  {
    name: '视频',
    value: 'video'
  },
  {
    name: '文本',
    value: 'text'
  }
]
// 标准名称
// const apiTypes: ApiType[] = ['aimodel', 'faceswap', 'img2img', 'img2tagger', 'segment', 'text2img']
//标准名称参数
// const apiKeys: Keys[] = ['ckpt_name', 'output', 'denoise']


// 预览工作流对话框
const dialog = ref(false)
/**
 * 新增工作流
 */
const handleAddWorkFlow = async (workflow: WorkFlow) => {
  //判断是否重名
  const _index = data.value.findIndex(item => item.name === workflow.name)
  _index === -1 ? data.value.unshift(workflow) : data.value[_index] = workflow
  //保存到数据库
  const result = await ComfyUI.workFlow_Save([workflow])
  console.log(result)
  useSnackbarStore().showSuccessMessage('保存成功')
  // windowTab.value=0
}
/**
 * 保存单个工作流
 * @param index
 */
const handleSaveWorkFlow = async (index: number) => {
  await ComfyUI.workFlow_Save([data.value[index]])
  useSnackbarStore().showSuccessMessage('保存成功')
}
const handleCreatApp = async (index: number) => {
  //将对应的工作流的share状态设置为true
  data.value[index].is_public = !data.value[index].is_public
  await ComfyUI.workFlow_Save([data.value[index]])
  useSnackbarStore().showSuccessMessage('设置成功')
}
/**
 * 删除单个工作流
 * @param index
 */
const handleDeleteWorkFlow = async (index: number) => {
  await ComfyUI.workFlow_Delete([data.value[index]])
  useSnackbarStore().showSuccessMessage('删除成功')
  data.value.splice(index, 1)
}

// 预览产出图片，全屏
const enablePreview = ref(false)
const preview_src = ref('')

// 重置为默认状态
const dialog_reset = ref(false)
// 处理元素名称变化
// const handleNodeChange=(item:any,Index:number)=>{
//   console.log(item,Index)
//   data.value[Index].params.find(_p=>_p.node===item.node)
// }

//常见的节点对应的参数，用于参数的自动添加
const comon_params = NodeToParam
// workflow 测试,测试获取节点
const handleWorkFlowAutoAddParams = (workflow: WorkFlow) => {
  if (!workflow.workflow) {
    return
  }
  const result = ComfyUI.workFlow_getNodeList(JSON.parse(workflow.workflow))
  //自动识别参数
  comon_params.forEach(_paramItem => {
    _paramItem["node"].forEach(_nodeItem => {
      // console.log(_paramItem,_nodeItem)
      // const _node=ComfyUI.workFlow_getNodeByName(JSON.parse(workflow.workflow),_nodeItem.nodeClass)
      //从所有的节点中寻找与当前节点类名匹配的节点
      const res = result.find(item => item.nodeClass === _nodeItem.nodeClass && item.nodeKey === _nodeItem.paramKey) as Param
      if (res) {
        res['name'] = _paramItem.param
        res['title'] = _paramItem.title
        handleAddParam(workflow, res)
        console.log(res)
        //提出当前循环
      }
    })
  })
  console.log(result)
}


//工作流编辑对话框
// const editDialog = ref(false)
const editItem = ref<WorkFlow>({})
const selectOption_Node = computed(() => {
  if (editItem.value.workflow) {
    return ComfyUI.workFlow_getNodeOptions(JSON.parse(editItem.value.workflow))
  }
})
watch(selectOption_Node, (newValue) => {
  console.log('newValue', newValue)
})

const handleAddNewWorkflow = () => {
  windowTab.value = 1
  editItem.value = {
    name: '',
    title: '',
    params: [],
    workflow: '',
    preview: ''
  }
}

const windowTab = ref(0)

// 示例json数据字符出
const sampledata = [
  {
    title: "下拉选项显示的标题",
    value: "传入节点的值"
  },
  {
    title: "下拉选项显示的标题",
    value: "传入节点的值"
  }
]


</script>

<template>
  <v-container>
    <v-window v-model="windowTab">
      <v-window-item value="0">
        <v-sheet class="d-flex pa-4">
          <v-spacer/>
          <v-btn size="small" color="primary" @click="handleAddNewWorkflow()">新增工作流</v-btn>
          <!--   重置为默认状态-->
          <v-dialog v-model="dialog_reset" scrollable max-width="600">
            <template v-slot:activator="{ props }">
              <v-btn size="small" class="mx-2" color="warning" @click="dialog_reset=true" v-bind="props">重置为默认状态
              </v-btn>
            </template>
            <v-card>

              <v-card-title>
                <v-icon color="warning" class="mx-2">mdi-alert</v-icon>
                注意
              </v-card-title>
              <v-spacer/>
              <v-card-text class="overflow-auto">
                重置为默认状态可以恢复系统初始的默认工作流，不影响自定义工作流，是否继续操作？
              </v-card-text>
              <v-divider></v-divider>
              <v-card-actions class="d-flex justify-end">
                <v-btn color="success" variant="tonal" @click="dialog_reset = false" class="px-4 ">
                  取消
                </v-btn>
                <v-btn color="error" variant="flat" @click="handleResetWorkFlow" class="px-4 ">
                  确认
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-dialog>
        </v-sheet>
        <!--      工作流卡片-->
        <v-row class="pt-4">
          <v-col cols="12" md="4" lg="3" v-for="(flowItem,Index) in data" :key="Index">
            <work-flow-card :workflow="flowItem">
              <template v-slot:actions>
                <v-btn rounded color="blue-grey-lighten-1" variant="flat" size="x-small"
                       @click="handleEditWorkFlow(Index)">修改
                </v-btn>
                <v-btn rounded variant="flat" size="x-small"
                       :color="flowItem.is_public?'amber-darken-1':'blue-grey-lighten-1'"
                       @click="handleCreatApp(Index)">{{ flowItem.is_public ? '隐藏' : '公开' }}
                </v-btn>
                <v-btn rounded color="amber-darken-1" variant="flat" size="x-small"
                       @click="handleResetWorkFlowItem(flowItem.name!)">重置
                </v-btn>
                <v-btn rounded color="deep-orange-lighten-2" variant="flat" size="x-small"
                       @click="handleDeleteWorkFlow(Index)">
                  删除
                </v-btn>
              </template>
            </work-flow-card>
          </v-col>
        </v-row>
      </v-window-item>
      <v-window-item value="1">
        <v-card>
          <v-card-title class="card-title d-flex">
            <v-icon @click="windowTab=0">mdi-arrow-left</v-icon>
            <span class="ml-2">自定义工作流{{ editItem.name }}</span>
          </v-card-title>
          <v-card>
            <v-card-title>新增工作流</v-card-title>
            <v-card-text class="overflow-auto">
              <v-label class="font-weight-bold">工作流名称(显示）</v-label>
              <v-text-field v-model="editItem.title" density="compact" class="my-4"
                            placeholder="工作流显示标题"
                            variant="underlined"></v-text-field>
              <v-label class="font-weight-bold">工作流名称(唯一，建议英文）</v-label>
              <v-text-field v-model="editItem.name" density="compact" class="my-4"
                            placeholder="工作流名称，不要与现有工作流名称重复"
                            variant="underlined"></v-text-field>
              <v-sheet>
                <v-label class="font-weight-bold mt-4">访问链接</v-label>
                <v-divider></v-divider>
                <v-sheet class="d-flex flex-row justify-end align-center">
                  <v-text-field class="mt-2" hide-details density="compact"
                                variant="underlined">{{
                      `${rootPath}/draw/${editItem.name}/${useAuthStore().user?._id}`
                    }}
                  </v-text-field>
                  <v-spacer></v-spacer>
                  <v-btn variant="outlined"
                         @click="navigateTo(`/draw/${editItem.name}/${useAuthStore().user?._id}`)">访问应用
                  </v-btn>
                  <!--                  <v-btn v-show="flowItem.is_public" variant="outlined" @click="navigateTo(`/draw/${flowItem.name}/${useAuthStore().user?._id}`)">设为公开</v-btn>-->
                </v-sheet>


                <v-row>
                  <!--                  工作流封面-->
                  <v-col cols="12" sm="6">
                    <v-label class="font-weight-bold mt-4">工作流封面</v-label>
                    <v-text-field class="mt-2" hide-details density="compact" variant="underlined"
                                  v-model="editItem.cover"></v-text-field>
                  </v-col>
                  <!--                  工作流描述-->
                  <v-col cols="12" sm="6">
                    <v-label class="font-weight-bold mt-4">工作流描述</v-label>
                    <v-text-field class="mt-2" hide-details density="compact" variant="underlined"
                                  v-model="editItem.description"></v-text-field>
                  </v-col>
                  <!--                  算力消耗-->
                  <v-col cols="12" sm="6">
                    <v-label class="font-weight-bold mt-4">算力消耗</v-label>
                    <v-number-input
                        :reverse="false"
                        controlVariant="stacked"
                        label=""
                        v-model="editItem.power"
                        :hideInput="false"
                        :inset="false"
                        class="ma-2"
                        variant="underlined"
                        density="compact"
                    ></v-number-input>
                  </v-col>
                  <!--                  排序-->
                  <v-col cols="12" sm="6">
                    <v-label class="font-weight-bold mt-4">排序</v-label>

                    <v-number-input
                        :reverse="false"
                        controlVariant="stacked"
                        label=""
                        v-model="editItem.sortNumber"
                        :hideInput="false"
                        :inset="false"
                        class="ma-2"
                        variant="underlined"
                        density="compact"
                    ></v-number-input>
                  </v-col>
                </v-row>
                <v-label class="font-weight-bold mt-4">上传工作流</v-label>
                <v-sheet class="d-flex flex-row justify-end">
                  <upload v-model="editItem.workflow"/>
                  <!--             预览-->
                  <v-dialog v-model="dialog" scrollable max-width="800">
                    <template v-slot:activator="{ props }">
                      <v-btn size="small" icon="mdi-eye" v-bind="props"></v-btn>
                    </template>
                    <v-card>
                      <v-card-title>工作流预览</v-card-title>
                      <v-divider></v-divider>
                      <v-card-text class="overflow-auto">
                        <m-d-preview :text="editItem.workflow"/>
                      </v-card-text>
                      <v-divider></v-divider>
                      <v-card-actions>
                        <v-btn color="error" variant="tonal" @click="dialog = false" class="px-4 ">
                          Close
                        </v-btn>
                        <v-btn color="success" variant="tonal" @click="dialog = false" class="px-4 ">
                          Save
                        </v-btn>
                      </v-card-actions>
                    </v-card>
                  </v-dialog>
                </v-sheet>
              </v-sheet>
              <v-sheet>

                <!--                产出预览-->
                <v-img max-height="200" :src="editItem.preview"
                       @click="enablePreview=true;preview_src=editItem.preview||''"></v-img>
                <v-divider/>
                <!--                 工作流参数操作-->
                <v-sheet class="d-flex mt-2 flex-row justify-end">
                  <!--                添加参数-->
                  <v-btn color="primary" class="mx-2" size="small" @click="handleWorkFlowAutoAddParams(editItem)">
                    自动参数
                  </v-btn>
                  <v-btn color="primary" class="mx-2" size="small" @click="handleAddParam(editItem)">手动参数</v-btn>
                  <v-btn color="warning" class="mx-2" size="small" @click="handleVerirication(editItem)">绘图测试
                  </v-btn>
                  <!--                  <v-btn :color="editItem.is_public?'error':'success'" class="mx-2" size="small"-->
                  <!--                         @click="handleCreatApp(index)">{{ editItem.is_public ? '设为私有' : '设为公开' }}-->
                  <!--                  </v-btn>-->
                  <!--                  <v-btn color="warning" class="mx-2" size="small" @click="handleResetWorkFlowItem(editItem.name)">-->
                  <!--                    重置单个工作流-->
                  <!--                  </v-btn>-->
                </v-sheet>
                <v-table>
                  <thead>
                  <tr>
                    <th v-for="(head, index) in table_headers" :key="index" class="text-left">
                      {{ head }}
                    </th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr v-for="(item,index) in editItem.params" :key="index">
                    <td>
                      <!--                      删除当前参数-->
                      <v-sheet width="30">
                        <v-btn color="error" size="x-small" icon="mdi-delete" variant="text"
                               @click="editItem.params.splice(index,1)"></v-btn>
                      </v-sheet>
                    </td>
                    <td>
                      <v-sheet width="100">
                        <a-input v-model:value="editItem.params[index].title" placeholder=""/>
                      </v-sheet>
                    </td>
                    <td>
                      <!--标准名称，用以配合接口参数的名称转换-->
                      <v-sheet width="150">

                        <a-select style="width: 100%" v-model:value="editItem.params[index].name">
                          <a-select-option v-for="item in keyOptions" :key="item.value" :value="item.value">
                            {{ item.name }}
                          </a-select-option>
                        </a-select>
                        <!--                        <a-input v-model:value="item.name" placeholder=""/>-->
                      </v-sheet>
                    </td>
                    <td>
                      <!--                      属性名称-->
                      <v-sheet width="150">
                        <!--                        <a-input v-model:value="item.type" placeholder=""/>-->
                        <a-cascader v-model:value="editItem.params[index].type"
                                    :options="selectOption_Node"
                                    :placeholder="item.type"/>
                        <!--                        产出节点独有参数-->
                        <v-sheet v-show="item.name === 'output'">
                          <v-label class="text-caption mt-2">超时时间:</v-label>
                          <a-input v-model:value="editItem.params[index].timeout" placeholder="超时时间"/>
                          <v-label class="text-caption mt-2">产出类型:</v-label>
                          <a-select style="width: 100%" v-model:value="editItem.params[index].outputType">
                            <a-select-option v-for="item in outputTypes" :key="item.value" :value="item.value">
                              {{ item.name }}
                            </a-select-option>
                          </a-select>
                        </v-sheet>

                      </v-sheet>
                    </td>
                    <!--                    默认参数-->
                    <td>
                      <a-textarea :auto-size="{minRows: 1, maxRows: 3}" v-model:value="editItem.params[index].param"
                                  placeholder=""/>
                    </td>
                    <!--                    传入值-->
                    <td>

                      <CodeEditDialog v-model="editItem.params![index].attributes" :label="editItem.params![index].attributes?'编辑':'添加'" :has-sample="true" :sample-data="sampledata"/>

                    </td>
                  </tr>
                  </tbody>
                </v-table>
              </v-sheet>
            </v-card-text>
            <v-divider></v-divider>
            <v-card-actions class="d-flex justify-end">
              <v-btn color="grey" variant="tonal" @click="windowTab = 0" class="px-4 ">
                取消
              </v-btn>
              <v-btn color="success" variant="flat" @click="handleAddWorkFlow(editItem)" class="px-4 ">
                确认
              </v-btn>
            </v-card-actions>
          </v-card>


        </v-card>

      </v-window-item>
    </v-window>

    <image-preview-full v-model:visible="enablePreview" :src="preview_src"></image-preview-full>
  </v-container>
</template>

<style scoped lang="scss">
</style>